<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>成语连连看</title>
		<style>
			td:hover {
				background-color: aquamarine;
			}
		</style>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<script>
			$(function() {
				//定义定时器
				var timer;
				//获取游戏总时长(转换成数字)
				var totalTime = parseInt($("#leftTime").html());

				function startTimer() {
					clearInterval(timer);
					//倒计时
					timer = setInterval(function() {
						totalTime--;
						$("#leftTime").html(totalTime);
						if (totalTime == 0) {
							alert("很遗憾,游戏时间耗尽,您没有完成所有题目!!!");
							clearInterval(timer);
							window.location = "index.html";
						}
					}, 1000);
				}
				
				startTimer();

				//所有的成语
				var words =
					"万象更新,抱头鼠窜,鸡鸣狗盗,千军万马,亡羊补牢,杯弓蛇影,鹤立鸡群," +
					"对牛弹琴,如鱼得水,鸟语花香,为虎作伥,黔驴技穷,画龙点睛,鼠目寸光," +
					"虎背熊腰,守株待兔,鹤发童颜,狗急跳墙,盲人摸象,画蛇添足,眼高手低," +
					"目瞪口呆,胸无点墨,头重脚轻,手足情深,口是心非,手疾眼快,耳闻目睹," +
					"头破血流,眉清目秀,袖手傍观,口出不逊,春光明媚,万紫千红,春雨如油," +
					"生机勃勃,春色满园,春意盎然,鸟语花香,春暖花开,百花齐放,和风细雨," +
					"前呼后拥,东倒西歪,眼高手低,口是心非,头重脚轻,有头无尾,前倨后恭," +
					"东逃西散,南辕北辙,左顾右盼,积少成多,同甘共苦,半信半疑,大材小用," +
					"先人后己,有口无心,天经地义,弄假成真,举足轻重,南腔北调,声东击西," +
					"转危为安,东倒西歪,反败为胜,以少胜多,由此及彼";
				words = words.split(",");
				//抽取16成语作为题目
				var generateWords = [];
				for (var i = 1; i <= 16;) {
					var idx = Math.floor(Math.random() * words.length);
					var word = words[idx];
					if ($.inArray(word, generateWords) == -1) {
						generateWords.push(word);
						i++;
					}
				}
				//把16个成语的文字组成一个字符串然后打乱
				var singleWords = [];
				for (var i = 0; i < generateWords.length; i++) {
					for (var j = 0; j < generateWords[i].length; j++) {
						singleWords.push(generateWords[i].charAt(j));
					}
				}
				//调用自定义的随机打乱字符串方法
				singleWords = shuffle(singleWords);

				//渲染数据到页面
				var curIdx = 0;
				var tableData = "";
				for (var i = 0; i < 8; i++) {
					tableData += "<tr>";
					for (var j = 0; j < 8; j++) {
						tableData += "<td is-selected='0'>" + singleWords[curIdx++] + "</td>";
					}
					tableData += "</tr>";
				}
				$("#data").append(tableData);

				//鼠标移入和移出事件,可以使用css伪类来实现
				//鼠标的点击事件
				var curAnswer = [];
				$("td").bind("click", function() {
					if ($(this).attr("is-selected") == "0") {
						//改变属性值
						$(this).attr("is-selected", "1");
						$(this).css("background-color", "aquamarine");
						//把点击的答案放入到数组中
						curAnswer.push($(this).html());
						//把内容填到文本框中
						fillBox(curAnswer);
						//当数组长度到达4,则判断点击的这些字能否组成成语
						if (curAnswer.length == 4) {
							var answerStr = curAnswer.join("");
							//判断是否正确
							if ($.inArray(answerStr, generateWords) != -1) {
								//正确
								//setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式
								setTimeout(function() {
									//添加动画渐变消除文字
									//把1-->空属性
									$("td[is-selected=1]").attr('is-selected', "").animate({
										"opacity": 0
									}, 1000, function() {
										if ($("td[is-selected!='']").length != 0) {
											startTimer();
										}
									});
									//解除事件
									$("td[is-selected='']").unbind();
									//清空数组
									curAnswer = [];
									clearBox();
									// 全部消除,则游戏成功!
									if ($("td[is-selected!='']").length == 0) {
										clearBox();
										alert("恭喜您顺利通关!");
										clearInterval(timer);
									}
								}, 500);
								
							} else {
								//错误
								//清空答案
								curAnswer = [];
								//清空文本框
								setTimeout(function() {
									clearBox();
								}, 500);
								$("td[is-selected=1]").attr("is-selected", "0").css("background-color", "");
							}
						}
					} else {
						//取消点中的内容
						$(this).attr("is-selected", "0");
						$(this).css("background-color", "");
						curAnswer.splice($.inArray($(this).html(), curAnswer), 1);
						fillBox(curAnswer);
					}
				});

				//随机打乱方法
				function shuffle(arr) {
			  for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j],
						arr[j] = x);
					return arr;
				}

				//单元格添加内容
				function fillBox(word) {
					var box = $(".functionArea input[type=text]");
					for (var i = 0; i < box.length; i++) {
						if (word[i]) {
							box.eq(i).val(word[i]);
						} else {
							box.eq(i).val("");
						}
					}
				}

				//清空文本框
				function clearBox() {
					$(".functionArea input[type=text]").val("");
				}
			});
		</script>
	</head>
	<body>
		<div class="main">
			<table id="data">

			</table>
			<div class="functionArea">
				<input type="text" disabled="disabled">
				<input type="text" disabled="disabled">
				<input type="text" disabled="disabled">
				<input type="text" disabled="disabled">
				<br />
				<p>剩余时间:</p>
				<span id="leftTime">6000</span>
			</div>
		</div>
	</body>
</html>
